<template>
  <div :class="{'mobile-legal-components':showMobilePage && !isExhibition}" class="opp-company-select-wrap">
    <div :class="[selectData.signType === 2 ? 'personage' : '']" class="opp-company">
      <el-form-item v-if="!isExhibition" :prop="moduleName + '.oppCompany'" label-width="80px" label="" class="personage-input">
        <SelectWithUserLoad
          v-if="queryAllSupplier"
          v-model="selectData.oppCompany"
          :loadmore-method="getSelectOtions()"
          :hide-select-list="hideSelectList || []"
          :need-loadmore="false"
          custom-label
          value-type="object"
          extend-key-name="type"
          clearable
          key-name="uuid"
          add-new
          placeholder="请选择"
          label-name="name"
          extend-class="panel-auto-width"
          class="width240"
          filterable
          allow-create
          collapse-tags
          @change="supplierChange"
          @addNewClick="goCreateSupplier"
        />
        <select-with-user-load
          v-else
          ref="mengliSuppliers"
          :disabled="selectData.signType === ''"
          v-model="selectData.oppCompany"
          :loadmore-method="getSupplier({ onlyChannel: true })"
          :hide-select-list="hideSelectList || []"
          :clearable="true"
          :key-name="'supplierName'"
          :add-new="true"
          placeholder="请选择"
          label-name="supplierName"
          extend-class="image"
          class="width240"
          filterable
          allow-create
          collapse-tags
          @addNewClick="goCreateSupplier"
        />
      </el-form-item>
      <div v-if="!isExhibition" class="sign-type">
        <el-form-item :prop="moduleName + '.signType'" label-width="80px" label="">
          <el-select v-model="selectData.signType" :disabled="signTypeDisabled" placeholder="请选择" popper-class="global-select-down" @change="signChange">
            <el-option
              v-for="item in signType"
              :key="item.value"
              :label="item.label"
              :value="item.value" />
          </el-select>
        </el-form-item>
      </div>
      <el-form-item v-if="!isExhibition && selectData.signType === 2" :prop="moduleName + '.oppIdentity'" label-width="80px" label="">
        <el-input v-model="selectData.oppIdentity" :maxlength="64" placeholder="对方身份证号码" />
      </el-form-item>
    </div>
    <div v-if="isExhibition" class="opp-info-text">
      <template v-if="selectData">
        <span v-if="selectData.signType">{{ selectData.signType | mapOptions(signType) }}</span>
        <span style="color: #666;">({{ selectData.oppCompany || '--' }})</span>
        <div v-if="selectData.oppIdentity && selectData.signType === 2" class="flex-center" style="color: #666;">
          对方身份证号码:&nbsp;
          <span v-if="isShowOppIdentity">{{ selectData.oppIdentity || '--' }}</span>
          <sensitiveInfo v-else :params-obj="paramsObj" :api-index="1" @setSensitive="setSensitive" />
        </div>
      </template>
      <span v-else>--</span>
    </div>
  </div>
</template>
<script>
import SelectWithUserLoad from '@/components/Common/selectWithUserLoad';
import sensitiveInfo from '@/components/SupplierComponent/sensitiveInfo';
import { signType } from '../../module/options.js';
import { mapOptions } from '@/filters';
import { getSupplierList } from '@/api/select';
import { getSignUpOtherOptions } from '@/api/legal';
import { mapState } from 'vuex';
import { hasRouteAuth } from '@/utils/permission';
export default {
  name: 'OppCompanySelect',
  components: {
    SelectWithUserLoad,
    sensitiveInfo
  },
  filters: {
    mapOptions
  },
  model: {
    prop: 'params',
    event: 'change'
  },
  props: {
    params: {
      type: Object,
      default: () => {
        return null;
      }
    },
    moduleName: {
      type: String,
      default: ''
    },
    isExhibition: {
      type: Boolean,
      default: false
    },
    queryAllSupplier: { // 获取所有供应商
      type: Boolean,
      default: false
    },
    detailData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      signType,
      isShowOppIdentity: false,
      supplierList: [],
      hideSelectList: []
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    selectData: {
      get() {
        return this.params;
      },
      set(val) {
        this.$emit('change', val);
      }
    },
    placeholder() {
      if (!this.selectData.signType) return '请选择签约类型';
      if (this.selectData.signType === 1) {
        return '对方公司名称';
      } else {
        return '对方姓名';
      }
    },
    paramsObj() {
      const { id, createInfo: { flowCode }} = this.detailData;
      return {
        id,
        workFlowSn: flowCode
      };
    },
    signTypeDisabled() {
      const oppCompanyTypes = [0, 2, 3, 4];// 飞博、萌力供应商
      return !(!this.selectData.oppCompany || this.selectData.oppCompany && !oppCompanyTypes.includes(this.selectData.oppCompanyType));
    }
  },
  methods: {
    setSensitive() {
      this.isShowOppIdentity = true;
    },
    getSupplier() {
      const a = function(params) {
        return new Promise((resolve, reject) => {
          getSupplierList({ onlyChannel: true, ...params }).then(res => {
            const data = res;
            resolve(data);
          }).catch(err => {
            reject(err);
          });
        });
      };
      return a;
    },
    getSelectOtions() {
      const a = function(params) {
        return new Promise((resolve, reject) => {
          getSignUpOtherOptions(params).then(res => {
            res.data && res.data.items && res.data.items.forEach(i => {
              i.uuid = i.id + '-' + i.type;
            });
            resolve(res);
          }).catch(err => {
            reject(err);
          });
        });
      };
      return a;
    },
    goCreateSupplier() { // 新建供应商
      if (!hasRouteAuth('medium:supplier:edit')) {
        this.$message.error('您暂无新增供应商权限');
        return;
      }
      const routeUrl = this.$router.resolve({
        name: 'supplierManage',
        query: {
          toCreate: 1
        }
      });
      window.open(routeUrl.href, '_blank');
    },
    signChange(value) {
      if (value === 1) {
        this.selectData.oppIdentity = '';
      }
    },
    supplierChange(val = {}) {
      // supplierType 1：公司，0：个人 signType1公司 2个人
      this.selectData.oppCompanyType = val.type;
      this.selectData.oppIdentity = '';
      if ([0, 1].includes(val.supplierType)) {
        this.selectData.signType = val.supplierType === 1 ? 1 : 2;
        if (val.supplierType === 0 && val.identityNumber) this.selectData.oppIdentity = val.identityNumber;
      } else {
        this.selectData.signType = val.id ? 1 : '';
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.opp-company-select-wrap {
  display: flex;
}
.opp-company {
  display: flex;
  &.personage {
    .personage-input {
      & ::v-deep {
        .el-input__inner {
          width: 120px !important;
          max-width: unset !important;
          min-width: unset !important;
        }
      }
    }
  }
  & ::v-deep {
    .el-input__inner {
      width: 140px !important;
      max-width: unset !important;
      min-width: unset !important;
    }
  }
}
.select-extend-btn {
  cursor: pointer;
  border-bottom: 1px solid #ddd;
  .select-extend-btn-text {
    color: #406eff;
  }
}
.sign-type {
  & ::v-deep {
    .el-input__inner {
      width: 90px !important;
      max-width: unset !important;
      min-width: unset !important;
    }
  }
}
.mobile-legal-components {
  flex-wrap: wrap;
  .sign-type {
    width: 100%;
    margin-bottom: 12px;
    ::v-deep .el-input__inner {
      width: 100% !important;
    }
  }
  .opp-company {
    flex-wrap: wrap;
    &.personage {
      .personage-input {
        margin-bottom: 12px;
        & ::v-deep {
          .el-input__inner {
            width: 100%  !important;
          }
        }
      }
    }
    & ::v-deep {
      .el-input__inner {
        width: 100%  !important;
      }
    }
  }
}
.opp-info-text {
  line-height: 1.2;
  padding-top: 8px;
}
</style>
